<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-28 09:19:32
 * @LastEditors: huangtianyang
 * @FilePath: \cxl-h5\src\pages\personalCenter\wallet\record\List.vue
-->
<template>
    <section class="list-ul">
        <template v-if="list.length">
            <section class="list-li" v-for="item in list" :key="item.time">
                <section class="icon">
                    <template v-if="type === 'CONSUME'">
                        <img src="../../../../assets/images/icon_xf@3x.png" alt="" />
                    </template>
                    <template v-else-if="type === 'PAY'">
                        <img src="../../../../assets/images/icon_cz@3x.png" alt="" />
                    </template>
                    <template v-else-if="type === 'REFUND'">
                        <img src="../../../../assets/images/icon_tk@3x.png" alt="" />
                    </template>
                </section>
                <section class="info">
                    <section class="describe">
                        <span
                            >{{ type === 'CONSUME' ? '消费一笔' : type === 'PAY' ? '充值' : '退款一笔' }}
                            <!-- <i class="give" v-if="item.give">3储值赠送4系统赠送</i> -->
                            <!-- <i class="give" v-if="item.payType === 3">赠送</i>
                            <i class="give" v-if="item.payType === 4">赠送</i> -->
                            <!-- <i class="fail" v-if="item.storeStatus === 0">未支付</i>
                            <i class="fail" v-if="item.storeStatus === 2 || item.storeStatus === 3">已关闭</i> -->
                        </span>
                        <p>{{ item.time }}</p>
                    </section>
                    <section :class="['money', type === 'CONSUME' ? 'consume' : '']">
                        <!-- <span :class="[item.storeStatus === 2 || item.storeStatus === 3 ? 'fail' : '']">
                            - {{ item.price }}
                        </span> -->
                        <span> {{ type === 'PAY' ? '+' : '-' }} {{ item.price }} </span>
                    </section>
                </section>
            </section>
        </template>
        <template v-if="emptyStatus">
            <section class="none">
                <section>
                    <img src="../../../../assets/images/icon_zwjyjl@3x.png" alt="" srcset="" />
                    <p>
                        {{
                            type === 'CONSUME'
                                ? '暂未查询到任何交易记录'
                                : type === 'PAY'
                                ? '暂未查询到任何充值记录'
                                : '暂未查询到任何退款记录'
                        }}
                    </p>
                    <section class="pay-btn">
                        <cxl-button type="primary" round v-if="type !== 'REFUND'" @click="openPay">去充值</cxl-button>
                    </section>
                </section>
            </section>
        </template>
    </section>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
//定义渲染列表
const list: any[] = reactive([])
//列表类型
const type = ref('')
const emptyStatus = ref(false)
//接收父级传递的参数
const props = defineProps(['list', 'type', 'emptyStatus'])
//监听父级传递的参数首次变化
watchEffect(() => {
    if (props.list) {
        list.length = 0
        list.push(...props.list)
    }
    type.value = props.type === undefined ? '' : props.type
    emptyStatus.value = props.emptyStatus === undefined ? false : props.emptyStatus
    console.log('props.none', props.emptyStatus)
})
const router = useRouter()
const openPay = () => {
    router.replace('/wallet')
}
</script>

<style scoped lang="scss">
.list-ul {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--cxl-size-40);
    .list-li {
        padding: 0 var(--cxl-size-16);
        display: flex;
        align-items: center;

        background-color: var(--cxl-color-white);
        .icon {
            width: 2rem;
            height: 2rem;
            margin-right: var(--cxl-size-12);
            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        .info {
            width: calc(100% - 2rem - var(--cxl-size-12));
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--cxl-size-18) 0;
        }
        &:not(:last-child) {
            .info {
                box-sizing: border-box;
                border-bottom: 1px solid var(--cxl-color-f0f0f0);
            }
        }

        .describe {
            span {
                font-size: var(--cxl-size-15);
                display: flex;
                align-items: center;
                i {
                    padding: 0.22rem var(--cxl-size-6);
                    color: var(--cxl-color-white);
                    font-size: var(--cxl-size-12);
                    border-radius: var(--cxl-size-12) 0 var(--cxl-size-12) 0;
                    margin-left: var(--cxl-size-6);
                }
                .give {
                    background-color: var(--cxl-color-f57221);
                }
                .fail {
                    background-color: var(--cxl-color-999999);
                }
            }
            p {
                font-size: var(--cxl-size-12);
                color: var(--cxl-color-999999);
                margin-top: var(--cxl-size-6);
            }
        }
        .money {
            font-size: var(--cxl-size-18);
            font-weight: bold;
            color: var(--cxl-color-f57221);
            &.consume {
                color: var(--cxl-color-black);
            }
            > span {
                &.fail {
                    color: var(--cxl-color-666666);
                }
            }
        }
    }
    .none {
        height: calc(100vh - var(--cxl-size-12) - var(--cxl-size-40));
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 6.4rem;
        box-sizing: border-box;
        flex-wrap: wrap;
        padding-bottom: calc(var(--cxl-size-12) + var(--cxl-size-40));
        > section {
            width: 100%;
            text-align: center;
        }
        img {
            display: block;
            width: 8.4rem;
            margin: auto;
        }
        p {
            font-size: var(--cxl-size-12);
            color: var(--cxl-color-999999);
            margin: var(--cxl-size-18) 0;
        }
    }
}
</style>
